<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="../js/vue.js"></script>
        <style>
          .item{
              width: 200px;
              height: 100px;
              border: #CCCCCC dashed 1px;
              margin-top: 20px;
          }
          .item div{
              height: 35px;
              line-height: 35px;
          }
        </style>
    </head>
    <body>
        <div id="container">
             商品列表：<br>
             <template v-for="g in goodslist">
                 <!--在子组件上监听事件 事件名称自己定义 的..-->
                 <goods :goods="g" @test-close="cls" @click.native="test"></goods>
             </template>
        </div>
       
        <script>
        
        var goods={
            props:{
               goods:{
                   type:Object,
                   default:function(){
                       return{
                          name:"无" ,
                          price:0
                       }
                   }
               }
            },
            methods:{
                close(){
                    console.log("子组件执行关闭...")
                    //触发该组件的close事件 将当前商品名称抛给父组件
                    this.$emit("test-close",this.goods.name);
                }
            },
            template:
            `
            <div class="item">
                <div>商品名称:{{goods.name}}</div>
                <div>
                    价格:￥<span style="color: #FF0000;">{{goods.price}}</span>
                </div>
                <input type="button" value="关闭" @click="close"/>
            </div>
            `
        };
        
        new Vue({
            el:"#container",
            data:{
                goodslist:[
                    {name:"华为手机",price:2999},
                    {name:"小米手机",price:999}
                ]
            },
            components:{
                goods
            },
            methods:{
                cls($event){
                    console.log("父组件监听到子组件事件",$event)
                    for(var i=0;i<this.goodslist.length;i++){
                        var tmp=this.goodslist[i];
                        //判断遍历到的商品是否是要关闭的商品$event
                        if(tmp.name==$event){
                            this.goodslist.splice(i,1);
                            break;//终止循环
                        }
                    }
                },
                test(){
                    console.log("-------测试")
                }
            }
            
        });
        </script>
    </body>
</html>
